<template>
	<view class="about">
		<view class="content">
			
			<view class="logo-row">
				<image class="logo" :src="bannerImgSrc"></image>
			</view>
			
			<view class="input-group">
				<view class="input-row border">
					<text class="title">账号：</text>
					<m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号" confirmType="next"></m-input>
				</view>
				<view class="input-row">
					<text class="title">密码：</text>
					<m-input type="password" displayable v-model="password" placeholder="请输入密码" confirmType="go" @confirm="bindFormSubmit()"></m-input>
				</view>
			</view>
			
			<view class="logo-row">
				<button type="primary" style="width: 80%;" @tap="bindFormSubmit()">登录</button>
			</view>
			
			
			<view class="action-row register-row">
				<navigator url="../reg/reg">注册账号</navigator>
				<text>|</text>
				<navigator url="../pwd/pwd">忘记密码</navigator>
			</view>

			<view class="setting-row" >
				<button type="default" @tap="bindSetting">设置</button>
			</view>
						
		</view>
		
		<view class="copyright-row">{{copyright}}</view>
		
	</view>
</template>

<script>
	import service from "../../service.js"
	import mInput from "../../components/m-input.vue"
	
	export default {
		components: {
			mInput,
		},
		data() { 
			return {
				account: '',
				password: '',
				copyright: '',
				bannerImgSrc: '../../static/img/default-login-banner.jpg',
				settingImgSrc: '',
				loginBaseUrl: '/names.nsf' //在onLoad方法会补全
			}
		},
		onLoad:function() {
			this.$serverBaseUrl = service.getServerHost();
			this.loginBaseUrl = this.$serverBaseUrl + this.loginBaseUrl;
			this.bindGetloginInfo();
		},
		onShow:function() {
			
			if (service.getServerHost() != this.$serverBaseUrl)	{
				this.$serverBaseUrl = service.getServerHost();  
			}
			console.log("now serverHost:"+this.$serverBaseUrl);
		},
		onUnload:function(){
			uni.hideLoading();
		},
		methods: {
			
			bindFormSubmit: function() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 1) {
				    uni.showToast({
				        icon: 'none',
				        title: '账号不能为空'
				    });
				    return;
				}
				if (this.password.length < 6) {
				    uni.showToast({
				        icon: 'none',
				        title: '密码最短为 6 个字符'
				    });
				    return;
				}  
				uni.showLoading({
					title: '登陆中...',
					mask: false
				});
				
				let loginUrl = this.$serverBaseUrl + '/names.nsf?login&username=' + this.account + '&password=' + this.password + '&RedirectTo=/Mobilelogin.nsf/GetUserLoginStatus';
				let baseUrl = this.loginBaseUrl;
				let getloginstatusFunc = this.bindGetloginStatus;
				console.log("loginurl:" + loginUrl + " \n base:" + baseUrl);
				let completeCallBackFun = function () {

					let cookVal = plus.navigator.getCookie(baseUrl);
					console.log(" cook:" + typeof (cookVal) + ' json:' + JSON.stringify(cookVal) );		
					if (!cookVal) {//若获取不到cookie，就是验证失败
						uni.showToast({
							title: '登录失败，核对用户名密码后重新登录!',
							mask: false,
							duration: 1500
						});
					}else  {
						getloginstatusFunc(cookVal);
					}
				};
				let errCallback = function () {
					console.log("webview error CallBack");
					uni.showToast({
						title: '登录失败，请检查网络或服务器设置!',
						mask: false,
						duration: 1500
					});
				};
				this.loginGetCookieByWebView(loginUrl, completeCallBackFun, errCallback);	
			},			
			bindGetloginStatus(cookiVal) {

				uni.request({
					url: this.$serverBaseUrl + "/Mobilelogin.nsf/GetUserLoginStatus",
					method: "GET",
					header: {
						'Cookie': cookiVal //自定义请求头信息
					},
					success: res => {
						console.log( JSON.stringify(res) );// + " _ " + JSON.stringify( res.header ) + ' _' + res.header['Content-Type'] );						
						uni.hideLoading();
						if (service.getServerResponseErr(res.data) == 0 && (res.data.loginstatus == "1")) {
						//验证成功
							uni.reLaunch({
								url: '../index/index',
								complete: () => {
									let wv = plus.webview.getWebviewById("validate-webview");
									wv.close(); console.log("webview close");
									if (service.getPasswordStoreEnable())	service.setUser(this.account, this.password);									
								}
							})
						}else {
							
							if (errMsg == '') errMsg = res.data.errorDesc;							
							uni.showToast({
								title: errMsg,
								mask: false,
								duration: 1500
							});
						}
					},
					fail: (err) => {
						console.error("请求失败：" + err.errMsg );
						uni.showToast({
							title: '登录失败!' + err.errMsg,
							mask: false,
							duration: 1500
						});
					}
				});
				
			},
			bindGetloginInfo() {
				console.log("userinfo: " + JSON.stringify( service.getUser()) + " device:" +service.getDeviceType());
				let userInfoStore = service.getUser(); 
				if (userInfoStore) {

					this.account = userInfoStore.account;
					this.password = userInfoStore.password;
					console.log("2");
				}
				uni.showLoading({
					title: '加载资源中，请稍后...',
					mask: true
				});
				
				let pos = this.$serverBaseUrl.indexOf("//");
				let serverVal = this.$serverBaseUrl.substring(pos+2, this.$serverBaseUrl.length);
				uni.request({
					url: this.$serverBaseUrl + "/Mobilelogin.nsf/GetLoginInfo?Openagent&",
					method: "GET",
					data: {
						'Server': serverVal,//要读取配置
						'Client': service.getDeviceType()
					},
					success: (res) => {
						uni.hideLoading();
						console.log(res.data);
						if (service.getServerResponseErr(res.data) == 0) {
							this.copyright = res.data.copyright;
							this.bannerImgSrc =  this.$serverBaseUrl + res.data.loginlogourl;
							this.settingImgSrc = this.$serverBaseUrl + res.data.systemsettinglogourl;
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '请求服务端失败！' + res,
							mask: false,
							duration: 1500
						})
					}
				});
			},			
			bindSetting() {
				uni.navigateTo({
					url: '../serversetting/serversetting?logo=' + this.settingImgSrc
				})
			},
			loginGetCookieByWebView(loginUrl, completeCallBack, errCallBack) {
				// #ifdef APP-PLUS
				console.log("loginGetCookieByWebView -----");
				let webviewId = "validate-webview";
				plus.navigator.removeAllCookie();
				var wv = plus.webview.getWebviewById(webviewId);
				if (!wv) {
					wv = plus.webview.create("", webviewId, {
						plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
						top: 1, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
						height: 1
					})
				}
				wv.onloaded = completeCallBack;
				wv.onerror = errCallBack;
				wv.loadURL( loginUrl );
				var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
				currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				// #endif
			},
		}
	}
</script>

<style>
	page,
	view {
		display: flex;
	}
	
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.about {
		flex-direction: column;
		flex: 1;
	}

	.content {
		flex: 1;
		padding: 30upx;
		flex-direction: column;
	}
	
	.input-group {
		display: flex;
		flex-direction: column;
	    background-color: #ffffff;
		margin: 20px 40upx;
	    position: relative;
	}
	
	.input-group::before {
	    position: absolute;
	    right: 0;
	    top: 0;
	    left: 0;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.input-group::after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	.input-row {
	    display: flex;
	    flex-direction: row;
	    position: relative;
	}
	
	.input-row .title {
	    width: 20%;
	    height: 50upx;
	    min-height: 50upx;
	    padding: 15upx 0;
	    padding-left: 30upx;
	    line-height: 50upx;
	}
	
	.input-row.border::after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 15upx;
	    height: 1upx;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	  
	button.primary {
        background-color: #0faeff;
		width: 100%;
		margin-left: 20upx;
		margin-right: 20upx;
	}
		
	.submit {

		margin: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	
	.copyright {
		height: 80upx;
		line-height: 80upx;
		justify-content: center;
		color: #ccc;
		position: absolute;
		bottom: 5%;
	}
	
	.version {
		height: 80upx;
		line-height: 80upx;
		justify-content: center;
		color: #ccc;
	}
	
    .action-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .action-row navigator {
        color: #007aff;
        padding: 0 20upx;
    }

    .logo {
		width: 80%;
		height: 155px;
		margin-top: 20px;
	}
	
	.logo-row {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
	}
	
	.setting-row {
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    margin-top: 30px;
	    position: relative;
	}
	
	.copyright-row {		
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.register-row {
		display: none;
	}
</style>